<template>
    <view class="tabs-container">


        <scroll-view scroll-x class="tabs-scroll">
            <view class="tabs">
                <view v-for="(item, index) in list" :key="index" class="tab-item"
                    :class="{ active: props.currentTab === index }" @click="handleTabClick(index)">
                    歌词{{ index + 1 }}
                </view>
            </view>
        </scroll-view>

        <checkbox-group class="section-toggles">
            <label v-for="section in sections" :key="section.name" class="toggle-item">
                <checkbox :value="section.name" :checked="section.show" @click="handleSectionToggle(section)" />
                <text class="checkbox-text">{{ section.label }}</text>
            </label>
        </checkbox-group>

        <view class="checkbox-group">
            <template v-for="section in sections" :key="section.name">
                <view v-if="section.show" class="checkbox-section">
                    <text class="section-title" @click="showSection(list[currentTab]?.[section.name])">{{ section.label }}</text>
                    <view v-for="(item, index) in list[currentTab]?.[section.name]" :key="index">
                        <view class="checkbox-item">
                            <text class="checkbox-text" @click="showWord(item)">{{ index + 1 }}. {{ item }}</text>
                            <view class="btn-group">
                                <button class="edit-btn" @click.stop="$emit('edit', section.name, index)">
                                    <image src="/static/icons/edit.svg" class="edit-icon" />
                                </button>
                                <button class="edit-btn" @click.stop="$emit('img', section.name, index)">
                                    <image src="/static/icons/send.svg" class="edit-icon" />
                                </button>
                            </view>
                        </view>
                        <view v-if="list[currentTab]?.imgs && list[currentTab].imgs[index]?.length" class="image-grid">

                            <view v-for="(img, i) in list[currentTab].imgs[index]" :key="i" class="image-item">
                                <image :src="img" mode="aspectFill" @click="previewImage(img, index)" />
                                <view class="image-delete" @click.stop="$emit('deleteImg', index, i)">
                                    <text class="delete-icon">×</text>
                                </view>
                            </view>
                        </view>
                    </view>

                </view>
            </template>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// import { useSongStore } from '@/stores/songs'

// const songStore = useSongStore()

// onMounted(() => {
//     songStore.fetchSongs();
// })


const props = defineProps({
    list: Array,
    sections: Array,
    currentTab: {
        type: Number,
        required: true
    }
});
const emit = defineEmits(['update:currentTab', 'edit', 'img', 'deleteImg']);
const handleTabClick = (index) => {
    emit('update:currentTab', index);
};

const handleSectionToggle = (section) => {
    section.show = !section.show;
};

const previewImage = (current, index) => {
    uni.previewImage({
        urls: props.list[props.currentTab]?.imgs[index] || [],
        current
    });
};

const showSection = (section) => {
    console.log(section);
    if (!section?.length) return;
    uni.setClipboardData({
        data: section.join('\n'),
        success: () => {
            uni.showToast({
                title: '已复制到剪贴板',
                icon: 'none'
            });
        }
    });
}

const showWord = (str)=>{
    uni.setClipboardData({
        data: str,
        success: () => {
            uni.showToast({
                title: '已复制到剪贴板',
                icon: 'none'
            });
        }
    });
}
</script>

<style lang="scss" scoped>
.tabs-container {
    margin-top: 20rpx;
}

.tabs-scroll {
    white-space: nowrap;
    border-bottom: 1px solid #eee;
}

.tabs {
    display: inline-flex;
    padding: 0 20rpx;
}

.tab-item {
    padding: 20rpx 30rpx;
    font-size: 28rpx;
    color: #666;
    position: relative;

    &.active {
        color: #409eff;

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20rpx;
            right: 20rpx;
            height: 4rpx;
            background: #409eff;
            border-radius: 2rpx;
        }
    }
}

.section-toggles {
    margin: 40rpx 0;
    display: flex;
    gap: 40rpx;
}

.checkbox-group {
    padding: 20rpx;
}

.checkbox-section {
    margin-bottom: 30rpx;

    .section-title {
        display: block;
        font-size: 28rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
        color: #333;
    }
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;
    gap: 20rpx;

    .checkbox-text {
        flex: 1;
        font-size: 26rpx;
        color: #666;
        line-height: 1.4;
        word-break: break-all;
        padding-top: 10rpx;
    }

    .btn-group {
        display: flex;
        gap: 10rpx;
        flex-shrink: 0;
    }

    .edit-btn {
        width: 60rpx;
        height: 60rpx;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        flex-shrink: 0;

        &::after {
            display: none;
        }

        .edit-icon {
            width: 32rpx;
            height: 32rpx;
            opacity: 0.6;
        }
    }
}

.image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    padding: 20rpx 0;

    .image-item {
        position: relative;
        width: calc((100% - 40rpx) / 3);
        aspect-ratio: 1;
        border-radius: 12rpx;
        overflow: hidden;

        image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .image-delete {
            position: absolute;
            top: 10rpx;
            right: 10rpx;
            width: 40rpx;
            height: 40rpx;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;

            .delete-icon {
                color: #fff;
                font-size: 32rpx;
                line-height: 1;
            }
        }
    }
}
</style>